<template>
	<view class="personal flexC-FS-C">
		<view class="top">
			<view class="people flexR-FS-FS">
				<!-- 背景 -->
				<div class="topImage">
					<u-image width="750rpx" height="360rpx" :src="imagesYqgjUrl + 'personalTitle.png'"></u-image>
				</div>
				<!-- 个人信息 -->
				<view class="head flexR-FS-C">
					<img class="head-image" :src="imagesYqgjUrl + 'head.png'"></img>
					<view class="flexC-FS-FS">
						<!--TODO 地区名称-->
						<text class="head-name">{{username}}</text>
						<!--TODO 公司名称-->
						<text class="head-company">工号：{{userjobnum}}</text>
					</view>
				</view>
			</view>
			<view class="bottom flexC-FS-FS">
				<!-- 菜单 -->
				<view class="menu flexC-FS-C">
					<view class="menu-item flexR-FS-C" v-for="(item, index) in menuList" :key="item.id"
						@click="toMenuPage(item)">
						<div class="menu-img">
							<u-image width="26rpx" height="30rpx" :src="item.src"></u-image>
						</div>
						<view class="menu-name">{{ item.title }}</view>
					</view>
				</view>

			</view>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import config from '@/configs/index.js'

	export default {
		data() {
			return {
				imagesYqgjUrl: config.IMAGES_URL_YQGJ + 'visitor/',
				menuList: [{
					id: 1,
					title: '历史记录',
					src: config.IMAGES_URL_YQGJ + 'visitor/record.png',
					path: '/sub-visitor/histroy'
				}],

				username: "测试员工",
				userjobnum: "2230579",
			};
		},

		methods: {
			toMenuPage(item) {
				uni.navigateTo({
					url: item.path
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.personal {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.top {
			width: 100%;

			.titl {
				.title-name {
					position: fixed;
					top: calc(var(--status-bar-height) + 16rpx);
					font-size: 36rpx;
					font-weight: 500;
					color: #ffffff;
					z-index: 5;
					letter-spacing: 1px;
				}
			}

			.title {
				z-index: 99;
				width: 100%;
				position: absolute;

				.titleContent {
					font-size: 40rpx;
					color: white;
					margin-top: 32rpx;
				}
			}

			.people {
				width: 100%;
				height: 360rpx;
				position: relative;

				.topImage {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
				}

				.head {
					width: 100%;
					height: 250rpx;
					background-color: white;
					border-radius: 20rpx;
					margin: calc(var(--status-bar-height) + 100rpx) 30rpx 0 30rpx;
					z-index: 5;

					.head-image {
						width: 166rpx;
						height: 166rpx;
						margin-right: 32rpx;
						margin-left: 32rpx;
						border-radius: 50%;
					}

					.head-name {
						font-size: 40rpx;
					}

					.head-company {
						margin: 10rpx 0;
						font-size: 32rpx;
						font-weight: 400;
					}

					.head-range {
						width: 186rpx;
						height: 50rpx;
					}
				}
			}

			.bottom {
				z-index: 5;
				margin: 100rpx 30rpx 0 30rpx;

				.menu {
					width: 100%;
					// height: 500px;
					background: #ffffff;
					border-radius: 12rpx;
					margin-top: 20rpx;
					margin-bottom: 26rpx;

					.menu-item {
						width: 100%;
						padding: 34rpx 0;
						border-bottom: 1px solid rgba(#979797, 0.16);

						.menu-img {
							margin: 0 30rpx;
						}

						.menu-name {
							font-size: 34rpx;
							color: #333333;
						}
					}

					.menu-item:last-child {
						border-bottom: 0 none;
					}
				}

				.sign-out {
					width: 100%;
					margin: 0 auto;
					height: 112rpx;
					background: #ffffff;
					border-radius: 10px;
					font-size: 34rpx;
					color: #fa3a3a;
				}
			}
		}
	}
</style>